<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线视频转webp</title>
</head>
<body>

<form action="" method="post" target="_blank" enctype="multipart/form-data" onsubmit="return confirm('即将提交转码，处理过程可能比较慢，建议60秒内不要重复提交；最大支持20M文件，超过则会处理失败。点击确认继续'); ">
    视频文件：<input type="file" name="file">
    <br><br>
    导出帧率：<select name="fps">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10" selected>10(体积优化，有点卡顿)</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16(丝滑了点，但体积也大了不少)</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20(更丝滑，体积更大)</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
    </select>
    &nbsp;&nbsp;
    导出画质(影响体积)：<select name="quality">
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="75">75</option>
        <option value="80">80</option>
        <option value="85">85</option>
        <option value="90" selected>90</option>
        <option value="95">95</option>
        <option value="100">100</option>
    </select>
    &nbsp;&nbsp;
    输出宽度：<input type="text" name="width" placeholder="留空表示不变更尺寸，高度会等比缩放" style="width: 220px;">
    <input style="margin-left: 20px;" type="submit" value="提交">
    <br><span style="color: dimgray">注意:<br> - 最大支持20M文件，超过则会处理失败<br> - 如果双击打开无法查看动图的话可以将webp文件拖拽到浏览器里<br> - 如果在线处理失败，可以试着在自己电脑上执行「 ffmpeg -i {$file} -r {$fps} -q:v {$quality} -vf scale={$outWidth}:-1 -loop 0 -y outFile.webp 」</span>
</form>

<div style="margin-top: 20px;">
 <iframe name="output" style="width: 600px;height: 500px;"></iframe>

</div>

</body>
</html>